<template>
  <div>
    <div ref="root"></div>
    <div v-for="(item, index) in list" :ref="el => { divs[i] = el }" :key="index">{{ index }}</div>
  </div>
</template>

<script>
import { ref, onMounted, reactive, onBeforeUpdate } from 'vue'
export default {
  setup () {
    const list = reactive([1, 2, 3])
    const divs = ref([])
    const root = ref(null)

    onMounted(() => {
      console.log(root.value) // 在渲染完成后，这个div DOM会被赋值给root ref对象
    })
    // 确保在每次变更之前重置引用
    onBeforeUpdate(() => {
      divs.value = []
    })

    return {
      root,
      list,
      divs
    }
  }
}
</script>
